<template>
	<el-table id="editable-table" ref="editTable" :data="data" :row-style="{height: '42px'}" border fit highlight-current-row :max-height="maxHeight" row-key="id"
		stripe @row-click="rowClick">
		<el-table-column align="center" label="序号" type="index" :width="indexWidth"></el-table-column>
		<template v-for="column in columns">
			<el-table-column :label="column.label" :prop="column.prop" :width="column.width" :column-key="column.prop" align="center" show-overflow-tooltip>
				<template v-slot="scope">
					<column-element :model="scope.row" :scope="scope" :item="column" @handle-change="handleChange" @handle-blur="handleBlur"></column-element>
				</template>
			</el-table-column>
		</template>
		<el-table-column :width="operateWidth" align="center" column-key="operation" label="操作">
			<template v-slot="scope">
				<el-button class="sort-button" icon="el-icon-plus" size="mini" type="primary" @click="appendRow(scope.$index)"></el-button>
				<el-button class="sort-button" icon="el-icon-minus" size="mini" type="primary" @click="removeRow(scope.$index)"></el-button>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
export default {
	name: "editable-table",
	props: {
		indexWidth: {
			type: String,
			default: "80px"
		},
		operateWidth: {
			type: String,
			default: "143px"
		},
		maxHeight: {
			type: String,
			default: "635px"
		},
		data: {
			type: Array,
			default() {
				return [];
			}
		},
		columns: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {};
	},
	updated() {
		this.$nextTick(() => {
			this.$refs.editTable.doLayout();
		});
	},
	methods: {
		appendRow(rowIndex) {
			this.$emit("handle-append", rowIndex);
		},
		removeRow(rowIndex) {
			this.$emit("handle-remove", rowIndex);
		},
		handleChange(prop, row, rowIndex) {
			this.$emit("handle-change", prop, row, rowIndex);
		},
		handleBlur(prop, row, rowIndex) {
			this.$emit("handle-blur", prop, row, rowIndex);
		},
		rowClick(row, column, event) {
			if (column && column.columnKey !== "operation" && event.target.tagName !== "INPUT") {
				this.$emit("handle-click", row, column, event);
			}
		}
	}
};
</script>

<style scoped>
#editable-table >>> .el-input__inner {
	text-align: center;
}
</style>
